<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'StudentLibrary',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/sport/student'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === '1' ? 'library-boy' : 'library-girl'" :style="cssVar" @click="changePage">
      <!--     因为设计稿中男女的文字布局有所不一样，所以需要判断性别选择样式 -->
      <div class="student-con">
        <!--       这里是动画的效果，参考aos官网https://michalsnik.github.io/aos/ -->
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <div v-if="annualData.libraryAppointCishu && annualData.sumLibraryStudy && annualData.sumLibraryStudyRank &&
          annualData.libraryEnterCishu && annualData.libraryEnterCishuRank" class="mt-10">
            <div class="mt-10">
              <p>最好的年纪遇到最好的你</p>
              <p>很开心能与你在2024邂逅</p>
              <p>2024年</p>
              <p>你总共预约图书馆 <span class="data">{{ annualData.libraryAppointCishu }}</span> 次</p>
              <p>自习时长达 <span class="data">{{ annualData.sumLibraryStudy }}</span> 小时</p>
              <p>在勤奋的ZUELers中排名 <span class="data">{{ annualData.sumLibraryStudyRank }}</span></p>
              <p>你总共进入图书馆 <span class="data">{{annualData.libraryEnterCishu}}</span> 次</p>
              <p>排名 <span class="data">{{annualData.libraryEnterCishuRank}}</span></p>
              <p>这里保存着文明的火种</p>
              <p>也滋润着未来的新知</p>
              <p>期待在新的一年看到更加朝气蓬勃</p>
              <p>积极向上的你</p>
            </div>
          </div>
          <!--  兜底文案  -->
          <div v-else class="mt-10">
            <div class="mt-10">
              <p>这一年</p>
              <p>你凭借对阅读与学习的热爱和坚持</p>
              <p>成为了图书馆的忠实粉丝</p>
              <p>每一次遨游书海</p>
              <p>都是一次奇妙旅程</p>
              <p>每一次在图书馆的停留</p>
              <p>都是对自我的提升</p>
            </div>
            <br/>
            <div class="mt-10">
              <p>期待新的一年</p>
              <p>你能继续与图书馆相伴</p>
              <p>在知识的道路上不断前行</p>
              <p>发现更多的精彩与美好</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.library-girl{
  background: url("../../assets/images/library/student-girl.jpg") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}
.library-boy{
  background: url("../../assets/images/library/student-boy.jpg") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}
.student-con{
  padding: 80px 20px;
}

p{
  color: #1B3B6A;
}
</style>
